<template>
    <div>
        <!-- 面包屑区域 -->
        <bread-detail :category="infoobj.categories" :name="infoobj.name"></bread-detail>
        <!-- 商品基本信息区域 -->
        <div class="goods-info">
            <div class="media">
                <goods-image :imgarr="infoobj.mainPictures"></goods-image>
                <goods-sales></goods-sales>
            </div>
            <div class="spec">
                <goods-name :name="infoobj.name" :desc="infoobj.desc" :price="skuobj.price || infoobj.price"
                    :oldPrice="skuobj.oldPrice"></goods-name>
                <!-- 规格 -->
                <goods-sku :specs="infoobj.specs" :skus="infoobj.skus" @send="getSkuData"></goods-sku>
                <!-- 数量 -->
                <div class="xtx-numbox">
                    <div class="label">数量</div>
                    <div class="numbox">
                        <a href="javascript:;" @click="num--" :disabled="true">-</a>
                        <input type="text" v-model="num" readonly />
                        <a href="javascript:;" @click="num += 1">+</a>
                    </div>
                </div>
                <button class="but" style="margin-top:20px;" @click="addCart">加入购物车</button>

            </div>
        </div>
        <!-- 同类商品推荐区域 -->
        <goods-relevant :goodsId="infoobj.id"></goods-relevant>
        <!-- 商品详情区域 -->
        <div class="goods-footer">
            <div class="goods-article">
                <!-- 商品+评价 -->
                <GoodsTab :infoobj="infoobj" />
                <!-- 注意事项 -->
                <div class="goods-warn">
                    <GoodsWarn />
                </div>
            </div>
            <!-- 24热榜+专题推荐 -->
            <div class="goods-aside">
                <GoodsHot :goodsId="infoobj.id" :type="'24小时热销榜'" />
                <GoodsHot :goodsId="infoobj.id" :type1="'周热销榜'" />
            </div>
        </div>
    </div>
</template>

<script>
import { getDetail } from '@/utils/api/detail';
import BreadDetail from './BreadDetail.vue';
import GoodsImage from './GoodsImage.vue';
import GoodsName from './GoodsName.vue';
import GoodsSales from './GoodsSales.vue';
import GoodsSku from './GoodsSku.vue';
// import XtxNumbox from '../utils/XtxNumbox.vue';
import GoodsRelevant from './GoodsRelevant.vue';
import GoodsTab from './GoodsTab.vue'
import GoodsHot from './GoodsHot.vue'
import GoodsWarn from './GoodsWarn.vue'
export default {
    components: {
        BreadDetail, GoodsImage, GoodsName, GoodsSales, GoodsSku,
        //  XtxNumbox, 
        GoodsRelevant, GoodsTab,

        GoodsHot,
        GoodsWarn

    },
    data() {
        return {
            infoobj: {},
            skuobj: {},
            num: 1
        }
    },
    mounted() {
        this.getDetailList(this.$route.query.id)

    },
    methods: {
        async getDetailList(id) {
            let res = await getDetail(id)
            console.log(res);
            this.infoobj = res.result
        },
        //  添加商品到购物车
        addCart() {
            //检查一下规格是否合适
            if (!this.skuobj.skuid) {
                this.$message({ text: "请选择合适的规格再加入", type: "error" })
                return false
            }
            //判断库存是否充足
            if (this.skuobj.inventory < this.num) {
                this.$message({ text: "库存不足", type: "error" })
                return false
            }
            //判断当前规格的产品是否在购物车
            var index = this.$store.state.cart.list.findIndex(item => item.skuid == this.skuobj.skuid)
            if (index == -1) {
                //存商品
                var obj = {
                    count: this.num,
                    select: false,
                    name: this.infoobj.name,
                    picture: this.infoobj.mainPictures[0],
                    skuId: this.skuobj.skuid,
                    price: this.skuobj.price,
                    attrsText: this.skuobj.skuname,
                    isCollect: false,
                    nowPrice: this.skuobj.price

                }
                //调用vuex中的方法
                this.$store.commit("cart/addList", obj)

            } else {
                //改数量
                this.$store.commit("cart/changeNum", { index, num: this.num })
            }
        },
        //接受从规格组件传递的数据
        getSkuData(obj) {
            this.skuobj = obj
            console.log(obj);
        }
    }
}
</script>

<style scoped lang="scss">
@import "@/assets/css/variables.scss";

.goods-info {
    min-height: 600px;
    background: #fff;
    display: flex;

    .media {
        width: 580px;
        height: 600px;
        padding: 30px 50px;
    }

    .spec {
        flex: 1;
        padding: 30px 30px 30px 0;

        .btn {
            margin-top: 20px;
            height: 50px;
            width: 180px;
            border-radius: 5px;
            font-size: 18px;
            color: white;
            background-color: #27ba9b;
            border: none;
        }
    }
}

.goods-warn {
    min-height: 600px;
    background: #fff;
}

.goods-footer {
    display: flex;
    margin-top: 20px;

    .goods-article {
        width: 940px;
        margin-right: 20px;
    }

    .goods-aside {
        width: 280px;
        min-height: 1000px;
        // background: red;
    }
}

.xtx-numbox {
    display: flex;
    align-items: center;

    .label {
        width: 60px;
        color: #999;
        padding-left: 10px;
    }

    .numbox {
        width: 120px;
        height: 30px;
        border: 1px solid #e4e4e4;
        display: flex;

        >a {
            width: 29px;
            line-height: 28px;
            text-align: center;
            background: #f8f8f8;
            font-size: 16px;
            color: #666;

            &:first-of-type {
                border-right: 1px solid #e4e4e4;
            }

            &:last-of-type {
                border-left: 1px solid #e4e4e4;
            }
        }

        >input {
            width: 60px;
            padding: 0 5px;
            text-align: center;
            color: #666;
        }
    }
}

.but {
    width: 160px;
    height: 50px;
    background: $xtxColor;
    border: none;
    color: #fff;
    border-radius: 5px;
    font-size: 18px;
}
</style>